<template>
    <div class="total">
        <!-- 顶部搜索、按钮部分 -->
        <div class="head">
            <el-form v-model="form" label-width="80px" style="display:flex">
                <el-form-item label="姓名" prop="name">
                    <el-input placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="岗位" prop="job">
                    <el-input placeholder="请输入岗位"></el-input>
                </el-form-item>
                <el-form-item label="用工性质" prop="quality" label-width="100px">
                    <el-input placeholder="请输入用工性质"></el-input>
                </el-form-item>
                <el-form-item label="入职时间" prop="entryTime" label-width="100px">
                    <el-date-picker type="date" placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <!-- 功能按钮部分 -->
            <div class="btn">
                <el-row style="display:flex">
                    <el-button type="primary" size="medium">查询</el-button>
                    <el-upload action="https://jsonplaceholder.typicode.com/posts/" :on-change="handleChange"
                        :show-file-list="status">
                        <el-button type="primary" size="medium">上传<i class="el-icon-upload2"></i></el-button>
                    </el-upload>
                    <el-button type="primary" size="medium" @click="download">下载<i class="el-icon-download"></i>
                    </el-button>
                </el-row>
            </div>
        </div>
        <!-- 表格部分 -->
        <div class="table">
            <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border
                style="width: 100%">
                <el-table-column fixed prop="id" label="序号" width="60" align="center"></el-table-column>
                <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
                <el-table-column prop="job" label="岗位" align="center"></el-table-column>
                <el-table-column prop="project" label="项目安排" align="center"></el-table-column>
                <el-table-column prop="sex" label="性别" width="50" align="center"></el-table-column>
                <el-table-column prop="place" label="户口所在地" align="center"></el-table-column>
                <el-table-column prop="academic" label="学历" align="center"></el-table-column>
                <el-table-column prop="quality" label="用工性质" align="center"></el-table-column>
                <el-table-column prop="entryTime" label="入职时间" width="120" align="center"></el-table-column>
                <el-table-column prop="wage" label="薪资（正式）" align="center"></el-table-column>
                <el-table-column prop="character" label="人员性格分析" show-overflow-tooltip></el-table-column>
                <el-table-column fixed="right" label="操作" width="150" align="center">
                    <template>
                        <el-button type="primary" size="small" @click="edit()">编辑</el-button>
                        <el-button type="danger" size="small" @click="del()">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器部分 -->
        <div style="text-align:right;margin-right:20px;padding-bottom: 10px;">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"
                :page-size="pageSize" :page-sizes="[5, 10, 15]" :current-page="currentPage"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" @prev-click="upChange"
                @next-click="nextChange">
            </el-pagination>
        </div>
        <!-- 编辑操作部分的弹框 -->
        <el-dialog title="编辑题目" :visible.sync="editVisible" width="50%" :before-close="handleClose">
            <hr>
            <el-form v-model="form" label-width="100px" style="margin-top:20px;">
                <el-form-item label="项目安排:" prop="project">
                    <el-input></el-input>
                </el-form-item>
                <el-form-item label="人员性格分析:" prop="character">
                    <el-input></el-input>
                </el-form-item>
            </el-form>
            <div style="margin-top: 20px; margin-left: 760px;">
                <el-button @click="onSubmit" type="primary">确定</el-button>
                <el-button @click="editVisible = false">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            status: false,//上传文件按钮是否显示上传列表
            // 分页部分数据
            pageSize: 5,//显示的数据条数
            currentPage: 1,//当前页开始的页数
            total: 50,//总条数
            detailVisible: false,//详情弹框
            editVisible: false,//编辑弹框
            form: {
                id: '',
                name: '',
                job: '',
                project: '',
                sex: '',
                place: '',
                academic: '',
                quality: '',
                entryTime: '',
                wage: '',
                character: '',
            },
            tableData: [
                {
                    id: 1,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                },
                {
                    id: 2,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                },
                {
                    id: 3,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                },
                {
                    id: 4,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                },
                {
                    id: 5,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                },
                {
                    id: 6,
                    name: "王一博",
                    job: "人事专员",
                    project: "金融事业部",
                    sex: "男",
                    place: "内蒙古",
                    academic: "本科",
                    quality: "试用期",
                    entryTime: "2022/06/07",
                    wage: "1500+1500",
                    character: "虚心学习、态度认真。性格开朗，执行力强。"
                }
            ],
        }
    },
    methods: {
        handleChange(file, fileList) {
            console.log(file, fileList);
        },
        // 点击文件下载按钮提示信息
        download() {
            this.$confirm('是否要下载此文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '下载成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消下载'
                });
            });
        },
        handleClose(done) {//对话框：点击X关闭页面友情提示信息
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                    let form = {
                        project: '',
                        character: '',
                    }
                    this.form = form;
                })
                .catch(_ => { });
        },
        // 分页部分
        // 改变每页显示的数据
        handleSizeChange(val) {
            console.log(`每页${val}条`);
            this.pageSize = val
            this.currentPage = 1
        },
        // 更改页码
        handleCurrentChange(val) {
            console.log(`当前页${val}条`);
            this.currentPage = val
        },
        // 上一页
        upChange(val) {
            console.log(val);
            this.currentPage -= 1;
        },
        // 下一页
        nextChange(val) {
            this.currentPage += 1;
        },
        // 操作中的删除按钮
        del() {

        },
        // 编辑操作
        edit() {
            this.editVisible = true;
        },
        // 编辑操作中的完成按钮
        onSubmit() {
            this.editVisible = false;
        },
    }
}
</script>
<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}

.total {
    background: #fff;

    .head {
        padding-top: 20px;
    }

    .table {
        margin: 10px auto;
        width: 1600px;
        height: 650px;
    }
}

.el-input {
    width: 150px;
}

.btn {
    float: right;
    margin-top: -60px;
    margin-right: 20px;

    .el-button {
        margin-right: 15px;
    }
}
</style>